<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请求头测试</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>请求头测试</h1>
    <button onclick="testRequest()">测试请求</button>
    <div id="result"></div>

    <script>
        // 模拟localStorage中的token
        localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmZnJlc2giOmZhbHNlLCJqdGkiOiI5YzFjYzE5ZC1hNzM0LTRmZDAtOTM5ZC1mNzM5NzM5NzM5NzM5IiwidHlwZSI6ImFjY2VzcyIsInN1YiI6IjEiLCJleHAiOjE3MzU5NzI4MDB9.example_signature');

        // 创建axios实例
        const request = axios.create({
            baseURL: 'http://localhost:5001/api',
            timeout: 10000
        });

        // 请求拦截器
        request.interceptors.request.use(
            config => {
                const token = localStorage.getItem('token');
                if (token) {
                    config.headers['Authorization'] = `Bearer ${token}`;
                    console.log('Token设置成功:', token.substring(0, 50) + '...');
                    console.log('完整请求头:', config.headers);
                } else {
                    console.log('No token found');
                }
                return config;
            },
            error => {
                return Promise.reject(error);
            }
        );

        // 响应拦截器
        request.interceptors.response.use(
            response => {
                console.log('响应成功:', response.data);
                return response;
            },
            error => {
                console.error('请求失败:', error.response?.data || error.message);
                return Promise.reject(error);
            }
        );

        async function testRequest() {
            try {
                console.log('开始测试请求...');
                const response = await request.get('/menus/?search=');
                document.getElementById('result').innerHTML = '<p style="color: green;">请求成功!</p>';
            } catch (error) {
                document.getElementById('result').innerHTML = `<p style="color: red;">请求失败: ${error.response?.data?.message || error.message}</p>`;
            }
        }
    </script>
</body>
</html> 